import React, { Component } from "react";
import { Menu, Switch, Layout, message } from "antd";
import { withRouter } from "react-router-dom";
import {
  UserOutlined,
  FileOutlined,
  ShopOutlined,
  ExportOutlined,
  AppstoreOutlined,
  DollarCircleOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import "./MySider.css";
import { getToken } from "../../utils/auth";

const { SubMenu } = Menu;
const { Sider } = Layout;

class MySider extends Component {
  state = {
    theme: "dark",
    current: "1",
    openKeys: ["sub1"],
  };
  rootSubmenuKeys = ["sub1", "sub2", "sub3", "sub4"];
  // 用于父menu聚焦
  onOpenChange = (keys) => {
    const latestOpenKey = keys.find(
      (key) => this.state.openKeys.indexOf(key) === -1
    );
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys: keys });
    } else {
      this.setState({ openKeys: latestOpenKey ? [latestOpenKey] : [] });
    }
  };

  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };

  user = JSON.parse(getToken());

  checkAuthority = (path, authority) => {
    if (
      path === "/Home/employeemanagement" ||
      path === "/Home/companymanagement" ||
      path === "/Home/agentmanagement"
    ) {
      if (authority === "all" || authority === "admin") {
        return true;
      } else {
        return false;
      }
    } else if (path === "/Home/productmanagement") {
      if (authority === "all" || authority === "goods") {
        return true;
      } else {
        return false;
      }
    } else if (
      path === "/Home/inquirymanagement" ||
      path === "/Home/quotationmanagement" ||
      path === "/Home/ordermanagement"
    ) {
      if (authority === "all" || authority === "order") {
        return true;
      } else {
        return false;
      }
    } else if (path === "/Home/stockmanagement") {
      if (authority === "all" || authority === "stock") {
        return true;
      } else {
        return false;
      }
    } else if (path === "/Home/deliverymanagement") {
      if (authority === "all" || authority === "delivery") {
        return true;
      } else {
        return false;
      }
    } else if (path === "/Home/invoicemanagement") {
      if (authority === "all" || authority === "finance") {
        return true;
      } else {
        return false;
      }
    } else if (path === "/Home") {
      return true;
    }
  };

  handleClick = (e) => {
    console.log("click ", e);
    console.log(this.user);
    if (this.checkAuthority(e.key, this.user.authority)) {
      console.log("true");
      this.setState({
        current: e.key,
      });
      const path = e.key.toString();
      this.props.history.push({
        pathname: path,
        state: { user_id: this.props.user_id },
      }); //传给每个管理父模块
    } else {
      message.error("对不起，您无权操作该模块！");
    }
  };

  render() {
    const { trigger, collapsible, collapsed } = this.props;
    return (
      <Sider
        theme={this.state.theme}
        trigger={trigger}
        collapsible={collapsible}
        collapsed={collapsed}
      >
        <br />
        <br />
        <br />
        <Menu
          theme={this.state.theme}
          onClick={this.handleClick}
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          selectedKeys={[this.state.current]}
          onOpenChange={this.onOpenChange}
          openKeys={this.state.openKeys}
        >
          <Menu.Item key="/Home" icon={<HomeOutlined />}>
            主页
          </Menu.Item>
          <SubMenu key="sub1" title="用户管理" icon={<UserOutlined />}>
            <Menu.Item key="/Home/employeemanagement">员工管理</Menu.Item>
            <Menu.Item key="/Home/companymanagement">客户管理</Menu.Item>
            <Menu.Item key="/Home/agentmanagement">代理人管理</Menu.Item>
          </SubMenu>
          <Menu.Item key="/Home/productmanagement" icon={<ShopOutlined />}>
            商品管理
          </Menu.Item>
          <SubMenu key="sub2" title="订单管理" icon={<FileOutlined />}>
            <Menu.Item key="/Home/inquirymanagement">询价单管理</Menu.Item>
            <Menu.Item key="/Home/quotationmanagement">报价单管理</Menu.Item>
            <Menu.Item key="/Home/ordermanagement">订单管理</Menu.Item>
          </SubMenu>
          <Menu.Item key="/Home/stockmanagement" icon={<AppstoreOutlined />}>
            库存管理
          </Menu.Item>
          <Menu.Item key="/Home/deliverymanagement" icon={<ExportOutlined />}>
            发货管理
          </Menu.Item>
          <Menu.Item
            key="/Home/invoicemanagement"
            icon={<DollarCircleOutlined />}
          >
            财务管理
          </Menu.Item>
        </Menu>
        <Switch
          checked={this.state.theme === "dark"}
          onChange={this.changeTheme}
          checkedChildren="Dark"
          unCheckedChildren="Light"
          style={{ position: "fixed", bottom: "30px" }}
        />
      </Sider>
    );
  }
}
export default withRouter(MySider);
